<template>
    <div class="pageMain">
        <div class="header">
            <van-nav-bar title="商品评价列表" left-arrow @click-left="toBack" />
        </div>
        <div class="conBox">
            <!-- 暂无内容 -->
            <img src="../../assets/tip_content.png" class="tip-img" v-if="list.length == 0">
            <div v-else>
                <div class="module" v-for="(item, index) in list" :key="index">
                    <img :src="path + 'zhonghui/user/' + item.userImg || '../../assets/geren/timg.png'" class="user-head"
                        @error="loadimg">
                    <div class="name-flex">
                        <div class="user-name">{{ item.userName || "佚名用户" }}</div>
                        <div class="user-time">{{ item.commentDate | dateControl }}</div>
                    </div>
                    <div class="star-box">
                        <img src="../../assets/product/comment-icon1.png" v-for="(star, sIndex) in 5" :key="sIndex">
                    </div>
                    <div class="user-text">{{ item.commentContent || "该用户没有做出任何评价" }}</div>
                    <div class="com-img-box mui-clearfix" v-if="item.comPics.length != 0">
                        <img :src="path + imgsrc.comment_pic" v-for="(imgsrc, imgIndex) in item.comPics" :key="imgIndex"
                            :class="isImgNum(item.comPics)" data-preview-src="" :data-preview-group="imgIndex">
                    </div>
                </div>
            </div>
        </div>

    </div>

</template>

<script>
import { alPath } from "../../network/request";
import { getAppComment } from '../../network/product'
export default {
    name: 'HomeR',
    data() {
        return {
            list: [],
            path: alPath,
        }
    },
    mounted() {

    },
    methods: {
        loadimg: function (e) {
            var img = e.srcElement;
            img.src = require('../../assets/geren/timg.png')
        },
        getList: function () {

            getAppComment({
                productId: localStorage.product_id
            }).then(res => {
                if (res.flag) {
                    res.data.forEach(item => {
                        item.comPics = []
                    })
                    this.list = res.data
                    console.log(this.list);
                }
            })


        },

        toBack() {
            this.$router.go(-1)
        },

    },
    created() {

        this.getList()
    },
    //计算属性
    computed: {
        isImgNum: function () {
            return function (imglist) {
                if (imglist.length === 1) {
                    return "com-img-1";
                } else if (imglist.length === 2) {
                    return "com-img-2";
                } else {
                    return "com-img-9";
                }
            }
        }

    },
    filters: {
        nameControl: function (value) {
            var chart = value.toString().split("");
            var text = chart[0] + "**" + chart[chart.length - 1];
            return text;
        },
        dateControl: function (value) {
            return value.split(" ")[0];
        }
    }

}

</script>

<style lang='less' scoped>
.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}

.conBox {
    padding-top: 90px;
}

.pageMain {
    width: 100%;
    height: 100vh;
    background: #f2f2f2;
    overflow: scroll;
}



.tip-img {
    display: block;
    width: 374px;
    margin: 300px auto;
}

.module {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding: 24px 24px 24px 120px;
    background: #FFFFFF;
}

.user-head {
    position: absolute;
    top: 24px;
    left: 24px;
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.user-name {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    line-height: 1;
}

.user-time {
    font-size: 24px;
    color: #999;
}

.user-text {
    width: 100%;
    font-size: 24px;
    color: #333;
    margin-bottom: 8px;
    margin-top: 16px;
    word-break: break-word;
}

.star-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.star-box img {
    display: block;
    width: 28px;
    margin-right: 4px;
}

.name-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 44px;
}

.com-img-1 {
    display: block;
    width: 70%;
    border-radius: 16px;
}

.com-img-2 {
    float: left;
    display: block;
    width: 49%;
    border-radius: 16px;
    height: 39vw;
    height: -webkit-calc(49vw - 60px);
    height: calc(49vw - 60px);
    object-fit: cover;
}

.com-img-2:first-child {
    margin-right: 2%;
}

.com-img-9 {
    float: left;
    display: block;
    width: 32%;
    height: 25vw;
    height: -webkit-calc(32vw - 40px);
    height: calc(32vw - 40px);
    border-radius: 16px;
    object-fit: cover;
    margin-bottom: 1.5vw;
}

.com-img-9:nth-child(3n+2) {
    margin-left: 2%;
    margin-right: 2%;
}

.tip-text {
    width: 100%;
    padding-bottom: 24px;
    font-size: 24px;
    text-align: center;
    color: #999;
    background: #FFFFFF;
}





.com-img-box video {
    display: block;
    width: 70%;
}
</style>